<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>和平精英 - 正在进入游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        pubg: {
                            primary: '#FF4D4F',
                            secondary: '#FF7A45',
                            accent: '#FFA940',
                            dark: '#1890FF',
                            light: '#F0F2F5',
                            success: '#52C41A',
                            warning: '#FAAD14',
                            danger: '#FF4D4F',
                            darkblue: '#121A2E',
                            gold: '#F3D19E'
                        }
                    },
                    fontFamily: {
                        pubg: ['Arial', 'Microsoft YaHei', 'sans-serif'],
                    },
                    boxShadow: {
                        'pubg': '0 4px 12px rgba(255, 77, 79, 0.3)',
                        'pubg-hover': '0 6px 16px rgba(255, 77, 79, 0.4)',
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'spin-slow': 'spin 3s linear infinite',
                        'scale-in': 'scaleIn 0.6s ease-out',
                        'fade-in': 'fadeIn 0.8s ease-out',
                        'glow': 'glow 2s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        scaleIn: {
                            '0%': { transform: 'scale(0.8)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        glow: {
                            '0%, 100%': { textShadow: '0 0 10px rgba(255, 77, 79, 0.8), 0 0 20px rgba(255, 77, 79, 0.5)' },
                            '50%': { textShadow: '0 0 20px rgba(255, 77, 79, 1), 0 0 30px rgba(255, 77, 79, 0.8)' },
                        }
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-blur {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-shadow-sm {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }
            .bg-gradient-pubg {
                background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
            }
            .bg-gradient-pubg-dark {
                background: linear-gradient(135deg, #121A2E 0%, #252F48 100%);
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.03);
            }
            .loading-bar {
                position: relative;
                overflow: hidden;
            }
            .loading-bar::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
                animation: shimmer 1.5s infinite;
            }
            @keyframes shimmer {
                100% {
                    left: 100%;
                }
            }
            .hexagon {
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
        }
    </style>
</head>
<body class="font-pubg bg-gradient-pubg-dark min-h-screen overflow-hidden">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 -z-10">
        <!-- 背景图片 -->
        <div class="absolute inset-0 bg-black opacity-60"></div>
        <!-- 动态光晕 -->
        <div class="absolute top-1/4 -right-40 w-80 h-80 bg-pubg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
        <div class="absolute bottom-1/3 -left-40 w-80 h-80 bg-pubg-accent/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s"></div>
        <div class="absolute top-1/2 left-1/3 w-80 h-80 bg-pubg-dark/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s"></div>
        <!-- 网格纹理 -->
        <div class="absolute inset-0 bg-[url('')] opacity-30"></div>
    </div>
    
    <!-- 主容器 -->
    <div class="container mx-auto px-4 py-12 flex flex-col items-center justify-center min-h-screen">
        <!-- 品牌Logo和标题 -->
        <div class="w-full max-w-md flex flex-col items-center space-y-12 animate-scale-in">
            <div class="relative w-48 h-48">
                <div class="absolute inset-0 bg-pubg-primary/20 rounded-full blur-xl"></div>
                <img src="https://via.placeholder.com/192x192?text=PEL" alt="和平精英" class="relative w-full h-auto object-contain animate-float">
            </div>
            
            <!-- 加载提示 -->
            <div class="text-center space-y-6">
                <h1 class="text-3xl md:text-4xl font-bold text-white animate-glow">正在进入游戏</h1>
                
                <!-- 加载进度条 -->
                <div class="w-full max-w-xs h-3 bg-white/10 rounded-full overflow-hidden">
                    <div id="progress-bar" class="h-full bg-gradient-pubg rounded-full transition-all duration-500 ease-in-out w-0 loading-bar"></div>
                </div>
                
                <!-- 加载状态文本 -->
                <p id="loading-status" class="text-pubg-gold text-sm animate-pulse-slow">正在加载游戏资源...</p>
                
                <!-- 倒计时 -->
                <div id="countdown-container" class="hidden items-center justify-center space-x-2 mt-4">
                    <span class="text-white/70 text-sm">即将进入游戏</span>
                    <span id="countdown" class="text-pubg-gold font-medium text-xl">5</span>
                </div>
            </div>
        </div>
        
        <!-- 游戏信息卡片 -->
        <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 w-full max-w-2xl bg-white/5 bg-blur rounded-xl border border-white/10 p-4 md:p-6 animate-slide-up" style="animation-delay: 0.8s">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- 服务器信息 -->
                <div class="flex flex-col items-center md:items-start">
                    <span class="text-white/50 text-xs mb-1">服务器</span>
                    <div class="flex items-center space-x-2">
                        <span class="inline-block w-2 h-2 bg-pubg-success rounded-full animate-pulse"></span>
                        <span class="text-white font-medium">和平精英 - 亚洲服务器</span>
                    </div>
                </div>
                
                <!-- 版本信息 -->
                <div class="flex flex-col items-center">
                    <span class="text-white/50 text-xs mb-1">版本</span>
                    <span class="text-white">1.25.36</span>
                </div>
                
                <!-- 玩家信息 -->
                <div class="flex flex-col items-center md:items-end">
                    <span class="text-white/50 text-xs mb-1">玩家</span>
                    <div class="flex items-center space-x-2">
                        <div class="w-6 h-6 bg-white/10 rounded-full overflow-hidden">
                            <img src="https://via.placeholder.com/24" alt="玩家头像" class="w-full h-full object-cover">
                        </div>
                        <span id="player-name" class="text-white">游客123456</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载动画 - 旋转的武器 -->
        <div class="absolute right-8 top-1/2 transform -translate-y-1/2 hidden lg:flex flex-col items-center space-y-4 animate-fade-in" style="animation-delay: 1s">
            <div class="w-40 h-40 relative">
                <img id="weapon-image" src="https://via.placeholder.com/128x128?text=武器" alt="武器" class="w-32 h-auto object-contain absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-spin-slow">
                <div class="absolute inset-0 bg-pubg-primary/10 rounded-full blur-xl"></div>
            </div>
            <span id="weapon-name" class="text-white font-medium text-shadow-sm">平底锅</span>
        </div>
        
        <!-- 加载动画 - 旋转的头盔 -->
        <div class="absolute left-8 top-1/2 transform -translate-y-1/2 hidden lg:flex flex-col items-center space-y-4 animate-fade-in" style="animation-delay: 1.2s">
            <div class="w-40 h-40 relative">
                <img id="helmet-image" src="https://via.placeholder.com/112x112?text=头盔" alt="头盔" class="w-28 h-auto object-contain absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 animate-spin-slow" style="animation-delay: 0.3s">
                <div class="absolute inset-0 bg-pubg-dark/10 rounded-full blur-xl"></div>
            </div>
            <span id="helmet-name" class="text-white font-medium text-shadow-sm">三级头</span>
        </div>
    </div>
    
    <!-- 加载完成弹窗 (默认隐藏) -->
    <div id="loading-complete-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70">
        <div class="text-center p-8">
            <h2 class="text-4xl font-bold text-white mb-4 animate-glow">加载完成</h2>
            <p class="text-pubg-gold text-xl mb-8 animate-float">准备好战斗了吗？</p>
            <button id="enter-game-button" class="px-8 py-3 bg-gradient-pubg hover:opacity-90 text-white font-bold rounded-lg shadow-pubg transition-all scale-hover">
                进入游戏
            </button>
        </div>
    </div>
    
    <!-- 页面脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 进度条和状态文本
            const progressBar = document.getElementById('progress-bar');
            const loadingStatus = document.getElementById('loading-status');
            const countdownContainer = document.getElementById('countdown-container');
            const countdown = document.getElementById('countdown');
            const loadingCompleteModal = document.getElementById('loading-complete-modal');
            const enterGameButton = document.getElementById('enter-game-button');
            
            // 模拟加载进度
            let progress = 0;
            const totalTime = 8000; // 总加载时间（毫秒）
            const interval = 50;   // 更新间隔
            const steps = totalTime / interval;
            const increment = 100 / steps;
            
            const progressInterval = setInterval(() => {
                progress += increment;
                progressBar.style.width = `${progress}%`;
                
                // 更新状态文本
                if (progress < 30) {
                    loadingStatus.textContent = '正在加载游戏资源...';
                } else if (progress < 60) {
                    loadingStatus.textContent = '正在连接服务器...';
                } else if (progress < 80) {
                    loadingStatus.textContent = '正在验证账号信息...';
                } else if (progress < 95) {
                    loadingStatus.textContent = '正在准备游戏环境...';
                } else {
                    loadingStatus.textContent = '加载完成，准备进入游戏...';
                }
                
                // 进度达到100%时停止
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    progressBar.style.width = '100%';
                    
                    // 显示倒计时
                    setTimeout(() => {
                        loadingStatus.classList.add('hidden');
                        countdownContainer.classList.remove('hidden');
                        countdownContainer.classList.add('flex');
                        
                        // 开始倒计时
                        let count = 5;
                        const countInterval = setInterval(() => {
                            count--;
                            countdown.textContent = count;
                            
                            if (count <= 0) {
                                clearInterval(countInterval);
                                showLoadingCompleteModal();
                            }
                        }, 1000);
                    }, 500);
                }
            }, interval);
            
            // 显示加载完成弹窗
            function showLoadingCompleteModal() {
                loadingCompleteModal.classList.remove('hidden');
                loadingCompleteModal.classList.add('flex');
            }
            
            // 进入游戏按钮点击事件 - 跳转到和平精英官方网站
            enterGameButton.addEventListener('click', function() {
                window.location.href = 'https://gp.qq.com/';
            });
            
            // 动态更改武器和头盔图片（模拟随机选择）
            const weapons = [
                { name: '平底锅', image: 'https://via.placeholder.com/128x128?text=平底锅' },
                { name: 'M416', image: 'https://via.placeholder.com/128x128?text=M416' },
                { name: 'AWM', image: 'https://via.placeholder.com/128x128?text=AWM' },
                { name: 'AKM', image: 'https://via.placeholder.com/128x128?text=AKM' }
            ];
            
            const helmets = [
                { name: '三级头', image: 'https://via.placeholder.com/112x112?text=三级头' },
                { name: '二级头', image: 'https://via.placeholder.com/112x112?text=二级头' },
                { name: '一级头', image: 'https://via.placeholder.com/112x112?text=一级头' },
                { name: '平底锅', image: 'https://via.placeholder.com/112x112?text=平底锅' }
            ];
            
            // 随机选择武器和头盔
            const randomWeapon = weapons[Math.floor(Math.random() * weapons.length)];
            const randomHelmet = helmets[Math.floor(Math.random() * helmets.length)];
            
            // 更新显示
            if (document.getElementById('weapon-image')) {
                // 确保使用页面中已经定义的占位图，避免覆盖
                // 只更新武器名称
                document.getElementById('weapon-name').textContent = randomWeapon.name;
            }
            
            if (document.getElementById('helmet-image')) {
                // 确保使用页面中已经定义的占位图，避免覆盖
                // 只更新头盔名称
                document.getElementById('helmet-name').textContent = randomHelmet.name;
            }
            
            // 模拟获取玩家名称
            function getPlayerName() {
                // 在实际应用中，这里会从登录信息中获取玩家名称
                // 这里模拟从localStorage中获取
                const savedName = localStorage.getItem('pubgPlayerName');
                return savedName || '游客' + Math.floor(Math.random() * 1000000);
            }
            
            // 更新玩家名称
            const playerName = document.getElementById('player-name');
            if (playerName) {
                playerName.textContent = getPlayerName();
            }
            
            // 允许用户按空格键直接进入游戏
            document.addEventListener('keydown', function(e) {
                if (e.code === 'Space' && loadingCompleteModal.classList.contains('hidden') && progress >= 95) {
                    showLoadingCompleteModal();
                } else if (e.code === 'Space' && !loadingCompleteModal.classList.contains('hidden')) {
                    enterGameButton.click();
                }
            });
        });
    </script>
</body>
</html>